<template>
  <el-select
      popper-class="tree-select-popper"
      v-model="value"
      ref="treeRef"
      clearable
      placeholder="请选择">
    <el-option :value="currentSelect">
      <el-tree
        :data="data"
        node-key="id"
        :default-expand-all="true"
        :expand-on-click-node="false"
        @node-click="selectNode"
      >
      </el-tree>
    </el-option>
  </el-select>
</template>

<script>
export default {
    name: 'TreeSelect',
    data () {
        return {
            value: '',
            currentSelect: 1,
            data: [
                {
                    id: 1,
                    label: '一级 1',
                    children: [{
                        id: 4,
                        label: '二级 1-1',
                        children: [{
                            id: 9,
                            label: '三级 1-1-1'
                        }, {
                            id: 10,
                            label: '三级 1-1-2'
                        }]
                    }]
                },
                {
                    id: 2,
                    label: '一级 2',
                    children: [
                        {
                            id: 5,
                            label: '二级 2-1'
                        },
                        {
                            id: 6,
                            label: '二级 2-2'
                        }
                    ]
                },
                {
                    id: 3,
                    label: '一级 3',
                    children: [
                        {
                            id: 7,
                            label: '二级 3-1'
                        },
                        {
                            id: 8,
                            label: '二级 3-2'
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        selectNode (data, node) {
            this.currentSelect = data.label
            this.value = data.label
            this.$nextTick(() => {
                this.$refs.treeRef.blur()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep {

}
</style>
